<template>
  <div class="category">
    <Navbar class="topNav">
      <span slot="navMiddle">商品分类</span>
    </Navbar>
    <NavControl
    v-show="navShow"
    class="navControl4"
    ref="navControl4"
     :NavControlData="navList"
     @navClick="navClick"></NavControl>
    <Side class="list" :cateList="cateList" @itemClick="itemClick"></Side>
    <Scroll class="con2" ref="cateScroll" @scroll="scrollP">  
    <Subcate :subList="subList" class="SubCate"/>
    <NavControl
    ref="navControl3"
     :NavControlData="navList"
     @navClick="navClick"></NavControl>
     <GoodsList :itemList="detailsList"></GoodsList>
    </Scroll>
  </div>
</template>
<script>
import { catelist, subCate, details } from "network/category";
import Navbar from "components/commom/navbar/Navbar";
import Scroll from 'components/commom/scroll/scroll'
import NavControl from 'components/content/NavControl'
import GoodsList from 'components/content/goods/GoodsList'
import Side from "./childcomponent/Side";
import Subcate from './childcomponent/Subcate'
export default {
  components: {
    Navbar,
    Side,
    Subcate,
    Scroll,
    NavControl,
    GoodsList
  },
  data() {
    return {
      navList:['综合','新品','销量'],
      cateList: [],
      subList: [],
      detailsList: [],
      curMaitKey:0,
      curMiniWallkey:0,
      offsetTop:1,
      positionY:0
    };
  },
  created() {
    this.cateData();
  },
  computed:{
    navShow(){
      if(this.positionY >= this.offsetTop){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    //监听事件
    scrollP(position){
      this.offsetTop = this.$refs.navControl3.$el.offsetTop
      this.positionY = -position.y
    },
    itemClick(maitKey,miniWallkey){
      this.curMaitKey = maitKey
      this.curMiniWallkey = miniWallkey
      this.subCate(this.curMaitKey);
      this.details(this.curMiniWallkey, "pop");
      this.$refs.navControl3.currentIndex = 0
      this.$refs.navControl4.currentIndex = 0
    },
    navClick(index){
      switch(index){
        case 0:
          this.details(this.curMiniWallkey, "sell");
          break;
        case 1:
          this.details(this.curMiniWallkey, "new");
          break;
        case 2 :
          this.details(this.curMiniWallkey, "pop");
          break;
      }
      this.$refs.navControl4.currentIndex = index
      this.$refs.navControl3.currentIndex = index
    },
    //请求数据
    cateData() {
      catelist().then((res) => {
        this.cateList = res.data.data.category.list;
        this.curMaitKey = this.cateList[0].maitKey
        this.curMiniWallkey = this.cateList[0].miniWallkey
        this.subCate(this.curMaitKey);
        this.details(this.curMiniWallkey, "sell");
      });
    },
    subCate(maitKey) {
      subCate(maitKey).then((res) => {
        this.subList = res.data.data.list;
      });
    },
    details(miniWallkey, type) {
      details(miniWallkey, type).then((res) => {
        this.detailsList = res.data;
        console.log(this.detailsList);
      });
    },
  },
};
</script>
<style scoped>
.category{
  position: relative;
}
.topNav {
  background-color: var(--bgColor);
  color: #fff;

}
.navControl4{
  position: absolute;
  left: 25%;
  right: 0;
  top: 40px;
  
}
.list{
    position: fixed;
    left: 0;
    right:75%;
    top: 40px;
    bottom: 49px;
    overflow: hidden;
}
.con2{
  position: fixed;
    left: 25%;
    right:0;
    top: 40px;
    bottom: 49px;
    overflow: hidden;
}
</style>